<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style>
			.list{
				width: 200px;
				height: 150px;
				background-color: orange;
				overflow: auto;
			}
			.news{
				height: 30px;
				background-color: skyblue;
				line-height: 30px;
			}
		</style>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			class Demo extends React.Component{
				state = {
					// newsArr:['新闻7','新闻6','新闻5','新闻4','新闻3','新闻2','新闻1']
					newsArr:[]
				}

				componentDidMount(){
					setInterval(() => {
						//获取原来的新闻
						const {newsArr} = this.state
						//更新新闻
						this.setState({
							newsArr:['新闻'+(newsArr.length+1),...newsArr]
						})
					},1000);
				}

				getSnapshotBeforeUpdate(){
					return this.refs.list.scrollHeight
				}

				componentDidUpdate(_,__,snapValue){
					const x = this.refs.list.scrollHeight - snapValue
					if(this.refs.list.scrollTop >= 30) this.refs.list.scrollTop += x
				}

				render(){
					return (
						<div className="list" ref="list">
							{
								this.state.newsArr.map((n,index)=>{
									return <div className="news" key={index}>{n}</div>
								})
							}
						</div>
					)
				}
			}

			ReactDOM.render(<Demo/>,document.getElementById('test'))
		</script>
	</body>
</html>